<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块级元素</title>
</head>
<body>
  <!-- a.块级元素
    1.独占一行
    2.宽度默认:100%
    3.高度默认:由内容撑起
    4.根据css设置宽高
  -->
  <div style="border: 1px solid blue; width: 100px; height: 100px;">我是块级元素</div>
  <div>我是第二个块级元素</div>

  <!-- b.有利于seo搜索引擎检索:
    title 选项卡标题
    keyWords 关键字 meta
    h1标题
    h5新增语义化标签
  
  -->
  <!-- 头部 -->
  <header style="background-color: red;">我是头部</header>
  <!-- 体部 -->
  <article>我是体部</article>
  <!-- 底部 -->
  <footer style="background-color: blue;">我是底部</footer>

  
</body>
</html>